import React from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import { FilterItem } from 'components'
import { Form, Button, Row, Col, DatePicker, Input, Cascader, Switch, Select } from 'antd'
import { converDate, SelectProps } from 'utils'
import { adminCompanyAccoutType } from 'utils/seletLocalData'

const Search = Input.Search
const { RangePicker } = DatePicker
const Option = Select.Option
const FormItem = Form.Item

const ColProps = {
  xs: 24,
  sm: 12,
  style: {
    marginBottom: 16,
  },
}

const TwoColProps = {
  ...ColProps,
  xl: 96,
}
const formItemLayout = {
  labelCol: {
    span: 10,
  },
  wrapperCol: {
    span: 14,
  },
}
const Filter = ({
  onCreateAdd,
  onFilterChange,
  filter,
  form: {
    getFieldDecorator,
    getFieldsValue,
    setFieldsValue,
  },
  optionData,
}) => {
  const handleFields = () => {
    let fields = { ...filter, ...getFieldsValue() }
    return fields
  }
  const handleSubmit = () => {
    onFilterChange(handleFields())
  }
  const handleReset = () => {
    const fields = getFieldsValue()
    for (let item in fields) {
      if ({}.hasOwnProperty.call(fields, item)) {
        if (fields[item] instanceof Array) {
          fields[item] = []
        } else {
          fields[item] = undefined
        }
      }
    }
    setFieldsValue(fields)
    handleSubmit()
  }
  const currenciesOption = optionData.currenciesData.map(d => <Option key={d.code}>{d.code}</Option>)
  return (
    <div>
      <Row gutter={24}>
        <Col span={8}>
          <FormItem label="AccountName" {...formItemLayout}>
            {getFieldDecorator('name', {
              initialValue: filter.name,
            })(<Input />)}
          </FormItem>
        </Col>
        <Col span={8}>
          <FormItem label="AccountNumber" {...formItemLayout}>
            {getFieldDecorator('accountNumber', {
              initialValue: filter.accountNumber,
            })(<Input />)}
          </FormItem>
        </Col>
        <Col span={8}>
          <FormItem label="CurrencyCode" hasFeedback {...formItemLayout}>
            {getFieldDecorator('currencyCode', {
              initialValue: filter.currencyCode,
            })(<Select style={{ width: '100%' }} {...SelectProps}>{currenciesOption}</Select>)}
          </FormItem>
        </Col>
      </Row>
      <div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', marginBottom: '10px' }}>
        <div >
          <Button type="primary" size="large" className="margin-right" onClick={handleSubmit}>Search</Button>
          <Button size="large" onClick={handleReset}>Reset</Button>
        </div>
        <div >
          <Button size="large" type="ghost" onClick={onCreateAdd}>Create Account</Button>
        </div>
      </div>
    </div>
  )
}

Filter.propTypes = {
  onAdd: PropTypes.func,
  form: PropTypes.object,
  filter: PropTypes.object,
  onFilterChange: PropTypes.func,
}

export default Form.create()(Filter)
